《Android开源库》 MPAndroidChart Wiki(译文)~Part 3

13. 图例

默认情况下,所有的图表都支持图例并且会自动生成。给图表设置完数据之后,图例会被绘制出来。图例通常由多个条目组成,每个条目由标签形式/形状表示。
自动生成的图例包含的条目数取决于不同颜色的数量(跨所有DataSet对象)以及DataSet标签。图例的标签取决于为图表中使用的DataSet对象设置的标签。如果没有指定DataSet对象的标签,图表将自动生成。

为了自定义Legend,我们可以通过如下方式从图表中拿到Legend对象:

1
Legend legend = chart.getLegend();

13.1 控制Legend是否被绘制

方法 使用
setEnabled(boolean enabled) 设置图例禁用或者启用。如果设置为false,图例将不会被绘制出来
**
### 13.2 样式/修改图例
方法 使用
—– ————-
setTextColor(int color) 设置图例标签的文本颜色
setTextSize(float size) 设置图例标签的字体大小(dp)
setTypeface(Typeface tf) 设置图例标签的字体
**
### 13.3 换行/避免裁剪
方法 使用
—– ————-
setWordWrapEnabled(boolean enabled) 如果设置为true,如果图例标签过长,将会另起一行来展示超出图表范围的内容,而不是截断它。请注意,启动后会降低性能并且这个只对处理图表下的图例标签有效
setMaxSizePercent(float maxSize) 设置最大图例的百分比(相对整个图表大小)。默认为0.95f (95%)
****
### 13.4 自定义图例
方法 使用
—– ————-
setPosition(LegendPosition pos) 设置图例的显示位置。可选项:RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE, BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER or PIECHART_CENTER (只有饼图使用这个)等等
setForm(LegendForm shape) 设置LegendForm。这是在带有图例条目表示的DataSet的颜色的图例标签旁边绘制的形状。可选项:SQUARE,CIRCLE、LINE。
setFormSize(float size) 设置legend-forms的大小(dp)
setXEntrySpace(float space) 设置横轴上的图例项之间的空间
setYEntrySpace(float space) 设置垂直轴上的图例条目之间的空间
setFormToTextSpace(float space) 设置图例标签和相应图例之间的空格
setWordWrapEnabled(boolean enabled) 设置 Legend 是否自动换行? 目前仅支持BelowChartLeft,BelowChartRight,BelowChartCenter.
***
### 13.5 设置自定义标签&颜色
方法 使用
—– ————-
setCustom(int[] colors, String[] labels) 设置自定义图例标签和颜色数组,颜色数量和标签数量相同且一一对应。这个方法将使默认的图例计算功能失效。调用resetCustom()来重新打开自动计算图例的功能(然后调用notifyDataSetChanged()来执行重新计算)
resetCustom() 调用这个方法之后自定义图例标签功能将会失效。标签将会被自动计算(调用notifyDataSetChanged()之后)
setExtra(int[] colors, String[] labels) 设置颜色数组和标签数据,颜色和标签一一对应,这些标签将会接在自动计算得到的标签之后(如果图例已经被计算出来, 我们需要调用notifyDataSetChanged()来让我们的修改生效)
*****
### 13.6 示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Legend l = chart.getLegend();
l.setFormSize(10f); // set the size of the legend forms/shapes
l.setForm(LegendForm.CIRCLE); // set what type of form/shape should be used
l.setPosition(LegendPosition.BELOW_CHART_LEFT);
l.setTypeface(...);
l.setTextSize(12f);
l.setTextColor(Color.BLACK);
l.setXEntrySpace(5f); // set the space between the legend entries on the x-axis
l.setYEntrySpace(5f); // set the space between the legend entries on the y-axis

// set custom labels and colors
l.setCustom(ColorTemplate.VORDIPLOM_COLORS, new String[] { "Set1", "Set2", "Set3", "Set4", "Set5" });

// and many more...

14. 动态 & 实时数据

从版本v1.6.3开始支持,持续改进中。

为了实现动态增删图表中的数据,开源库提供了大量的方法,方便我们实现图表中DataSet 数据条目的增加和删除。

14.1 动态添加/删除数据的可能性

DataSet类(和它的所有子类):
|方法|使用|
|———|————|
|addEntry(Entry e)|把指定Entry添加到DataSet|

ChartData类(和它的所有子类)
|方法|使用|
|———|————|
|addEntry(Entry e, int dataSetIndex)|把指定Entry添加到DataSet的指定索引位置|
|addDataSet(DataSet d)|把指定DataSet添加到ChartData中|

除此之外,还存在动态移除数据的方法,具体如下:

DateSet类(和它的所有子类)
|方法|使用|
|———|————|
|public boolean removeFirst()|移除第一个Entry(索引为0)。成功返回true,失败返回false|
|public boolean removeLast()|移除最后一个Entry(索引为size-1)。成功返回true,失败返回false|
|public boolean removeEntry(Entry e)|移除指定Entry。成功返回true|
|public boolean removeEntry(int xIndex)|移除指定索引的Entry。成功返回true|

ChartData类(和它的所有子类)
|方法|使用|
|———|————|
|public boolean removeEntry(Entry e, int dataSetIndex)|移除指定索引位置DataSet中的给定Entry对象。成功则返回true|
|public boolean removeEntry(int xIndex, int dataSetIndex)|移除指定索引位置DataSet中的给定xIndex索引对应的Entry对象。成功则返回true|
|public boolean removeDataSet(DataSet d)|从ChartData中移除指定DataSet。成功则返回true|
|public boolean removeDataSet(int index)|从ChartData中移除指定索引位置对应的DataSet。成功则返回true|


14.2 注意

在动态增加或者删除数据之后,记得调用notifyDataSetChanged() ,然后调用invalidate()来执行刷新操作。

1
2
3
4
5
6
7
8
9
10
11
12
// EXAMPLE 1
// add entries to the "data" object
exampleData.addEntry(...);
chart.notifyDataSetChanged(); // let the chart know it's data changed
chart.invalidate(); // refresh

// EXAMPLE 2
// add entries to "dataSet" object
dataSet.addEntry(...);
exampleData.notifyDataChanged(); // let the data know a dataSet changed
chart.notifyDataSetChanged(); // let the chart know it's data changed
chart.invalidate(); // refresh

注意:像moveViewTo(…)这样的方法,将会自动调用invalidate()。


14.3 动态数据示例

有关如何实现动态数据添加/删除的示例,请参考示例应用程序和其中的如下Activity:


15. 修改视窗

本库提供了各种方法来修改视窗(图表的可见部分)。注意,这些修改视窗的方法仅适用于LineChart, BarChart, ScatterChart和CandleStickChart。
下面提到的方法都是Chart类提供的方法。修改视窗的另一种方法是通过ViewPortHandler直接访问它(没有图表提供的中间安全性)。这仅适用于熟悉API的高级用户。

请注意,只有在设置数据之后才能调用上面这些修改视窗的方法

15.1 限制可见范围

方法 使用
setVisibleXRangeMaximum(float maxXRange) 设置在X轴上一次性最大可见范围。如果这个值设置为10,则X轴取值超过10之外的图表在不滚动的情况是无法被看到的
setVisibleXRangeMinimum(float minXRange) 设置在X轴上一次性能看到的最小范围,如果这个值设置成10,则不管你怎么放大,X轴的取值范围都不会小于10
setVisibleYRangeMaximum(float maxYRange, AxisDependency axis) 设置Y轴上一次性最大可见范围。通过AxisDependency明确对应的Y轴
setViewPortOffsets(float left, float top, float right, float bottom) 设置当前视窗的自定义偏移量(实际图表窗口侧面的偏移量),设置这个值将阻止图表自动计算其偏移量。使用resetViewPortOffsets()方法来恢复自动计算偏移量的功能。注意,如果你不知道这个是干什么的,请先搞清楚再使用
resetViewPortOffsets() 重置所有setViewPortOffsets(…)设置的偏移量。允许图表自动计算所有偏移量
setExtraOffsets(float left, float top, float right, float bottom) 在自动计算的偏移量的基础上增加额外的偏移量。这个方法不会改变自动计算的偏移量结果,只是在其基础上追加
**
### 15.2 移动视图
方法 使用
———– —————
fitScreen() 重设所有缩放和拖动,使图表完全适合它的边界(完全缩小)
moveViewToX(float xValue) 将当前视窗的左侧(边)到指定的 x 值
moveViewToY(float yValue, AxisDependency axis) 使得指定的y值显示在对应y轴( 左or右 )的中间
moveViewTo(float xValue, float yValue, AxisDependency axis) 将当前视窗的左侧移动到x轴上的指定x值,并将视窗居中到所提供的y轴上的指定y值,相当于setVisibleXRange(…) 和 setVisibleYRange(…) 组合使用
centerViewTo(float xValue, float yValue, AxisDependency axis) 将使当前视窗的中心移动到指定的x值和y值相当于 setVisibleXRange(…) 和 setVisibleYRange(…) 组合使用

15.3 移动视图动画

方法 使用
moveViewToAnimated(float xValue, float yValue, AxisDependency axis, long duration) 和上面moveViewTo结果一样,只是这个过程有动画效果
centerViewToAnimated(float xValue, float yValue, AxisDependency axis, long duration) 和上面centerViewTo结果一样,只是这个过程有动画效果
*****
### 15.4 缩放
方法 使用
———– —————
zoomIn() 以图表中心为中心点,1.4倍步幅放大
zoomOut() 以图表中心为中心点,0.7倍步幅缩小
zoom(float scaleX, float scaleY, float x, float y) 根据所给的参数进行放大或缩小。 参数 x 和 y 是变焦中心的坐标(单位:像素)。 记住,1f = 无放缩 。
zoomAndCenterAnimated(float scaleX, float scaleY, float xValue, float yValue, AxisDependency axis, long duration) 按照给定的缩放因子进行缩放,并将视图中心移动到指定位置(带动画)
**
### 15.5 完整示例
1
2
3
4
5
6
chart.setData(...); // first set data

// now modify viewport
chart.setVisibleXRangeMaximum(20); // allow 20 values to be displayed at once on the x-axis, not more
chart.moveViewToX(10); // set the left edge of the chart to x-index 10
// moveViewToX(...) also calls invalidate()
# 译文
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×